<template>
    <div class="item" v-for="(comment, index) in props.comments" :key="index">
        <div>
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div class="header">
                    <el-avatar style="border: 1px solid gray;" :size="50" :src="comment.avatar" />
                    <div style="margin-left: 15px;">
                        <div class="user">{{ comment.username }}</div>
                        <div class="time">{{ formatTimestamp(comment.time) }}</div>
                    </div>
                </div>
                <div class="header_fn">
                    <div class="like">
                        <SvgIcon @click="getLick(comment, index)" style="cursor: pointer;" name="like" width="1.5em"
                            height="1.5em">
                        </SvgIcon>
                        <span>{{ comment.like }}</span>
                    </div>

                    <div class="like">
                        <SvgIcon @click="reply(comment, index)" style="margin-left: 30px; cursor: pointer;"
                            name="commit" width="1.5em" height="1.5em">
                        </SvgIcon>
                        <span>{{ comment.commit }}</span>
                    </div>

                </div>
            </div>
            <div style="margin-left: 65px; margin-top: 5px;">
                <text class="text">{{ comment.content }}</text>
            </div>
        </div>
        <div style="margin-left: 65px; margin-top: 5px;">
            <CommitList :comments="comment.replies"></CommitList>
        </div>

    </div>

</template>

<script setup lang="ts">
import SvgIcon from "@/components/Icons/index.vue"
import { formatTimestamp } from "@/utils/time";
import { useCommitStore } from "@/store/useCommitStore";
import { putComment } from "@/server/home/http"
const commitStore = useCommitStore()

const props = defineProps({
    comments: Array
})


const reply = (comment: any, index: number) => {
    let placeholder = "@" + comment.username + "/" + comment.content + ":"
    commitStore.placeholder = placeholder
    commitStore.level = comment.level + 1
    commitStore.parentId = comment.parentId
    commitStore.index = index
}

const getLick = async (comment: any, index: number) => {
    comment.like += 1
    await putComment(commitStore.commitList[index])
}


</script>

<style scoped lang="scss">
::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

.item {
    margin: 5px 0;
    padding-top: 5px;
    border-radius: 5px;
    height: max-content;
    background: var(--el-fill-color-light);

    .text {
        font-weight: bold;
        line-height: 2;
        letter-spacing: 1px;
    }

    .header {
        display: flex;
        align-items: center;

        .user {
            font-size: 20px;
            font-weight: bold;
        }

        .time {
            font-size: 12px;
            margin-top: 10px;
        }


    }

    .header_fn {
        margin-right: 70px;
        display: flex;
        align-items: center;

        .like {
            display: flex;
            align-items: center;

            span {
                font-weight: bold;
                font-size: 12px;
                margin-left: 5px;
            }
        }
    }

}
</style>